<template>
  <div>
    <div style="height: 40px;color: midnightblue;line-height: 40px;text-align: left;font-size: 20px;font-family: 华文琥珀">热门游戏</div>
    <div class="game">
      <a v-for="game in gList" @click="goByGame(game.gname)"><el-avatar  :size="60" :src="game.pic" style="margin-left: 70px;box-shadow:7px 7px 10px #888888;"></el-avatar></a>
    </div>
    <div style="height: 40px;color: midnightblue;line-height: 40px;text-align: left;font-size: 20px;font-family: 华文琥珀">所有陪玩</div>
    <el-row>
      <el-col :span="4" v-for="(o, index) in pList" :key="o.id" :offset="index > 0 ? 2 : 0" style="margin-left:30px;margin-top:20px;font-size: 12px">
        <el-card :body-style="{padding: '0px'}" style="box-shadow:7px 7px 10px #cac6c6;border-radius: 13px;">
          <img :src="o.pic" class="image">
          <div style="padding:5px;">
            <div style="height:50px;width: 150px;line-height: 30px;float: left;text-align: left;margin: auto; ">
              <div style="height: 20px;width: 50px;color: darkmagenta;font-family: 华文彩云;font-size: 16px;font-weight: bold"><label>{{o.name}}</label></div>
              <div style="height: 20px;width: 60px;float: left;color: midnightblue;font-family: 微软雅黑;font-size: 10px;font-weight: bold"><label>{{o.gname}}</label></div>
              <div style="height: 20px;width: 80px;float: left;color: coral;font-family: 微软雅黑;font-size: 10px;font-weight: bold;margin-left: 10px"><label>{{o.price}}/小时</label></div>
            </div>
            <div style="height:50px;width: 30px;line-height: 30px;float: left;text-align: left;margin-top:10px; ">
              <span><el-button type="danger" size="mini" icon="el-icon-check" circle @click=open(o) ></el-button></span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="height: 40px;line-height: 40px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="height: 40px;margin-top: 10px">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" style="border-radius: 13px;">
      <div style="float: left;width:250px;height: 250px"><img :src="play.pic" class="image"></div>
      <div style="height: 200px">
        <div class="name a">昵称：{{play.name}}</div>
        <div class="name b">游戏：{{play.gname}}</div>
        <div class="name c">价格：{{play.price}}/小时</div>
        <div class="name d">年龄：{{play.age}}</div>
        <div class="name e">性别：{{play.gender}}</div>
        <div style="height: 60px;line-height: 30px;float: left">
          <el-input-number style="margin-left: 30px" v-model="number" size="small" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
        </div>
        <div class="name f">￥ {{play.price*number}}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click=goPay(play)>去下单</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import cookie from 'vue-cookie'
  export default {
    name: "shouye",
    data() {
      return {
        formLabelWidth: '120px',
        number: 1,
        user:{},
        gList:[],
        pList:[],
        play:[],
        total:7,
        currentPage:1, //初始页
        pagesize:10,    //每页的数据
        dialogTableVisible: false,
        dialogFormVisible: false,
        order:{
          uid:'',
          pid:'',
          num:'',
          price:'',
        },
        payVo:{
          price:'',
          gname:'',
          id:''
        }
      }
    },
    methods:{
      findAll:function () {
        axios.post("api/play/findAll",{gname:'英雄联盟',page:this.currentPage,size1:this.pagesize}).then(res=>{
          this.pList=res.data.data;
          this.total=res.data.total;
          // if (res.data.code==200){
          //   console.log(res.data.data)
          //   this.pList=res.data.data;
          // }
        })
      },
      findGame:function () {
        axios.post("api/play/findGame").then(res=>{
          this.gList=res.data.data;
          if (res.data.code==200){
            console.log(res.data.data)
            this.gList=res.data.data;
          }
        })
      }, goByGame:function (gname) {
        this.$router.push(
          {
            path:'/byGame',
            query:{
              gname:gname
            }
          }
        )
      },
      open:function (play) {
        this.dialogFormVisible = true;
        this.play=play;
        console.log(play)
      },
      handleChange(value) {
        this.order.num=value;
      },
      handleSizeChange: function (size) {
        this.pagesize = size;
        this.findAll();
        console.log(this.pagesize)  //每页下拉显示数据
        console.log(this.pList)
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        this.findAll();
        console.log(this.currentPage);
        console.log(this.pList)//点击第几页
      },
      goPay:function (play) {
        this.dialogFormVisible = false
        if(cookie.get("token")){
          this.order.uid=this.user.id;
          this.order.pid=play.id;
          this.order.price=this.play.price*this.number;
          console.log(this.order);
          axios.post("api/order/add",this.order).then(res=>{
            if (res.data.code==200){
              this.payVo.price=this.play.price*this.number;
              this.payVo.gname=play.gname;
              this.payVo.id=res.data.data;
              axios.post("api/pay",this.payVo).then((res) =>{//返回成功调用此方法
                document.querySelector('body').innerHTML = res.data;//查找到当前页面的body，将后台返回的form替换掉他的内容
                document.forms[0].submit();  //执行submit表单提交，让页面重定向，跳转到支付宝页面
              })
                .catch((err)=>{
                  console.log(err)
                })
            }
          })
        }
        else{
          var _this=this;
          this.$confirm('登录后才能下单, 是否去登录?', '提示', {
            confirmButtonText: '去登录',
            cancelButtonText: '再看看',
            type: 'warning'
          }).then(() => {
            _this.$router.push('/login')
          }).catch(() => {
          });
        }
      },
      getUser:function () {
        this.order.num=this.number;
        var user=sessionStorage.getItem("user");
        axios.post("api/user/getUser",{name:user}).then(res=>{
          if (res.data.code==200){
            console.log(res.data.data)
            this.user=res.data.data;
          }
        })
      }
    },
    mounted(){
      this.getUser();
      this.findGame();
      this.findAll();

    }
  }
</script>
<style>
  body > .el-container {
    margin-bottom: 40px;
  }
  .name{
    line-height: 30px;
    height: 30px;
    text-align: left;
    margin-left: 30px;
    float: left;
    width: 320px;

  }
  .a{
    color: #475669;
    font-family: 微软雅黑;
    font-size: 15px;
  }
  .b{
    color: #475669;
    font-family: 微软雅黑;
    font-size: 15px;
  }
  .c{
    color:  #475669;
    font-family: 微软雅黑;
    font-size: 15px;
  }
  .d{
    color:  #475669;
    font-family: 微软雅黑;
    font-size: 15px;
  }
  .e{
    color:  #475669;
    font-family: 微软雅黑;
    font-size: 15px;
  }
  .f{
    color: crimson;
    font-family: 微软雅黑;
    font-size:25px;
    font-weight: bold
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .image {
    width: 100%;
    display: block;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
</style>
